<template>
	<view>
		<uni-popup ref="UniPopup" type="center" @touchmove.stop.prevent="moveHandle">
			<view class="popup" :style="{ width: width + 'rpx', color: textColor }">
				<view class=" " style="text-align: center;" :style="{ fontSize: fontSize + 'rpx' }">
					<text>{{ title }}</text>
				</view>
				<view class="content" v-if="type === 'input' && newType != 'phone'">
					<input class="input" :placeholder-style="placeholderStyle" :placeholder="placeholder" :type="inputType"
						v-model="inputValue"></input>
				</view>
				<view class="content" v-else>
					<view style="display: flex;align-items: center;">
						<span>手机号：</span>
						<input class="input" style="width: 392rpx;" :placeholder-style="placeholderStyle"
							:placeholder="placeholder" :type="inputType" v-model="inputValue"></input>
					</view>
					<view style="display: flex;align-items: center;margin-top: 20rpx;">
						<label>验证码：</label>
						<input class="input" style="width: 35%;" :placeholder-style="placeholderStyle"
							:placeholder="'验证码'" :type="inputType" v-model="code"></input>
						<button class="button_obtain"  v-show="sendAuthCode" @click.prevent="codeChange"
							style="outline: none;font-size: 28rpx;">
							获取验证码
						</button>
						<span v-show="!sendAuthCode" class="auth_text">
							<span class="auth_text_blue">{{ auth_time }}</span>秒之后重发</span>
					</view>
				</view>
				<view class="button flex jbetween" style="border-top: 1px solid #e9e9e9;">
					<view class="left"
						style="color: #000;font-size: 30rpx;flex: 5;border-right: 1px solid #e9e9e9;text-align: center;padding: 10px 0 10px 0;"
						@click="close">{{ cancelText }}</view>
					<view class="right"
						style="color: blue;font-size: 30rpx;flex:5;text-align: center;padding: 10px 0 10px 0;"
						@click="submit">{{ confirmText }}</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
//不想双向绑定了
const reg = /^1[345789]\d{9}$/; // 手机号正则
import { TemplateCode//获取验证码
	, UserReplacePhone//换绑手机号
 } from "../pages/interface"
export default {
	props: {
		title: { //标题
			type: String,
			default: "收藏名称"
		},
		inputType: { //input輸入框类型
			type: String,
			default: "text"
		},
		placeholder: { //placeholder
			type: String,
			default: "请输入收藏名称"
		},
		placeholderStyle: {
			type: String,
			default: "font-size:28rpx;padding-left:20rpx"
		},
		type: { //显示的内容区域累心
			type: String,
			default: 'input'
		},
		width: { //彈窗的寬度
			type: [Number, String],
			default: 600
		},
		textColor: { //标题颜色
			type: String,
		},
		fontSize: { //标题字体大小
			type: [Number, String],
			default: 35
		},
		cancelText: { //取消按钮
			type: String,
			default: "取消"
		},
		confirmText: { //确定按钮
			type: String,
			default: "确定"
		},
		parentObj: { //父组件对象
			type: Object
		}
	},
	data() {
		return {
			inputValue: "",
			newType: "",
			sendAuthCode:true,
			auth_time:0,
			code:''
		}
	},
	methods: {
		InputClick(event) {
			const inputRule = /[^\d.]/g //只能输入数字和小数
			this.$nextTick(function () {
				this.searchValue = event.replace(inputRule, '');
			})
		},
		moveHandle() { },
		// 搜索
		search(e) {
			let arr = []
			this.data.forEach(item => {
				let newStr = item.NickName + item.Name + item.Phone
				item.newStr = newStr
				console.log('循环', item, item.NickName, item.Name, item.Phone, '-----    ' + item.newStr)
				if (item.newStr.indexOf(e.value) != -1) {
					arr.push(item)
				}
			})
			this.hobby = arr
		},
		open(data, entity) {
			console.log('修改用户信息弹窗', data, entity)
			if (data) this.inputValue = data
			else this.inputValue = ""
			this.newType = entity
			this.$refs.UniPopup.open() //打开弹窗

		},
		close() {
			this.searchValue = ''
			this.$refs.UniPopup.close()
		},
		submit() {
			if(this.newType=='phone'){
				if (!this.inputValue) return this.$util.toast('请输入手机号')
				if (!reg.test(this.inputValue)) return this.$util.toast('请核对手机号格式')
				if (!this.code) return this.$util.toast('请输入验证码')
				
				let oldPhone = uni.getStorageSync('userInfo').Phone;
				UserReplacePhone({
					Phone: oldPhone,
					SmsCode: this.code,
					NewPhone: this.inputValue
				}).then(res => {
					if (res.Success) {
						this.$util.toast('手机号变更成功!')
						this.$emit('submitPopup', this.inputValue, this.newType)
						this.$refs.UniPopup.close()
					} else {
						this.$util.toast(res.Msg)
					}
				}).catch(err=>{
					this.$util.toast(err.Msg)
				})
				return;
			}
			this.$emit('submitPopup', this.inputValue, this.newType)
			this.$refs.UniPopup.close()
			
		},
		//获取验证码
		codeChange() {
			var that = this
			if (!this.inputValue) return this.$util.toast('请输入手机号')
			if (!reg.test(this.inputValue)) return this.$util.toast('请核对手机号格式')
			TemplateCode(this.inputValue)
				.then(res => {
					if (res.Success) {
						this.$util.toast('短信发送成功')
						// 显示正在发送
						this.sendAuthCode = false;
						//设置倒计时秒
						this.auth_time = 60;
						var auth_timetimer = setInterval(() => {
							this.auth_time--;
							if (this.auth_time <= 0) {
								this.sendAuthCode = true;
								clearInterval(auth_timetimer);
							}
						}, 1000);
					} else {
						this.$message.error(res.Msg)
					}
				})
		},

	}
}
</script>

<style scoped lang="scss">
.popup {
	background: #fff;
	padding: 20rpx 0rpx 0rpx 0rpx;
	border-radius: 10rpx;

	.content {
		margin: 20rpx 20rpx;

		.input {
			border: 1px solid #ccc;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			font-size: 30rpx;

		}
	}

	.button {
		margin-top: 40rpx;
	}
}
</style>